<!-- eslint-disable indent -->
<script setup>
import { onMounted, onUnmounted } from 'vue'
import { useSiteStore } from './stores'
import { switches } from './config'
import LoadingBar from './components/loadingBar/LoadingBar.vue'
import SiteBanner from './views/site/SiteBanner.vue'
import SiteHeader from './views/site/SiteHeader.vue'
import SiteFooter from './views/site/SiteFooter.vue'
import { useToast } from 'vue-toastification'
import { useRoute } from 'vue-router'
import SettingsWindow from './views/site/SettingsWindow.vue'

setTimeout(() => { useToast().success(`Welcome!${resolveFrom()}`) }, 1000)

const route = useRoute()
const siteStore = useSiteStore()

function resolveFrom() {
  if (!('query' in route)) return ''
  switch (route.query.from) {
    default: return ''
  }
}

onMounted(() => {
  document.documentElement.dataset.theme = useSiteStore().getTheme()
  document.addEventListener('click', flowerOnClick)
  onUnmounted(() => document.removeEventListener('click', flowerOnClick))
  hideBannerIfNeed()

  function flowerOnClick(event) {
    let v = document.createElement('div')
    const maxH = document.body.scrollHeight, h = maxH / 10 + 10
    const maxW = document.body.scrollWidth, w = 20
    v.setAttribute('class', 'virtual-container')
    v.style.left = event.pageX - 8 + 'px'
    v.style.top = event.pageY - 8 + 'px'
    v.style.width = event.pageX + 20 + 8 > maxW ? maxW - event.pageX + 8 + 'px' : w + 'px'
    v.style.height = event.pageY + h + 8 > maxH ? maxH - event.pageY + 8 + 'px' : h + 'px'
    let e = document.createElement('div')
    e.setAttribute('class', 'click-star')
    v.appendChild(e)
    document.body.appendChild(v)
    setTimeout(() => document.body.removeChild(v), 1000)
  }

  function hideBannerIfNeed() {
    if (window.innerWidth > 769)
      siteStore.setShowBanner(false)
  }
})

</script>

<template>
  <div class="page-wrapper">
    <LoadingBar />
    <SiteBanner v-if="switches.enableBanner && siteStore.siteState.showBanner" />
    <SiteHeader />
    <RouterView />
    <SiteFooter />
    <SettingsWindow :condition="siteStore.siteState.showBlurModel" @close="siteStore.setShowBlurModel(false)" />
  </div>
</template>

<style>
.virtual-container {
  position: absolute;
  pointer-events: none;
  z-index: 999;
  overflow: hidden;
}

.click-star {
  position: absolute;
  font-size: large;
  color: #efd7d9;
  animation: -snowflake-animate 1s linear forwards;
  z-index: 999;
}

.click-star::before {
  content: '\1F338';
}

@keyframes -snowflake-animate {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: .6;
  }

  60% {
    opacity: 1;
  }

  100% {
    transform: translateY(10vh) rotate(90deg) rotateY(30deg);
    opacity: 0;
  }
}
</style>

<style scoped>
.page-wrapper {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
</style>
